<template>
  <el-dialog
    :model-value="dialogFormVisible"
    :destroy-on-close="true"
    title="商户开卡配置"
    width="780px"
    @close="
      () => {
        cardType = '';
        emits('closeDialog');
      }
    "
  >
    <el-form
      ref="dialogFormRef"
      :model="dialogForm"
      :label-width="formLabelWidth"
      :rules="rules"
    >
      <el-form-item label="商户" prop="merchant_id">
        <el-select
          clearable
          v-model="dialogForm.merchant_id"
          placeholder="商户"
          filterable
          style="width: 100%"
        >
          <el-option
            v-for="item in payMerchantList"
            :key="item.value"
            :label="item.name + '-' + item.merchant_id"
            :value="item.merchant_id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="卡片类型(内部提示)">
        <el-select
          clearable
          v-model="cardType"
          placeholder="卡片类型"
          @change="cardTypeChange"
          style="width: 100%"
        >
          <el-option
            v-for="item in cardConfigData"
            :key="item.cn_name"
            :label="item.cn_name + '-' + item.en_name"
            :value="item.cn_name + '-' + item.en_name"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="卡片类型中文" prop="name">
        <el-input v-model="dialogForm.name" />
      </el-form-item>
      <el-form-item label="卡片类型英文" prop="en_name">
        <el-input v-model="dialogForm.en_name" />
      </el-form-item>
      <el-form-item label="区域(内部备注)" prop="region">
        <el-input v-model="dialogForm.region" />
      </el-form-item>
      <el-form-item label="业务场景(内部备注)" prop="business">
        <el-input v-model="dialogForm.business" />
      </el-form-item>
      <el-form-item label="卡种类(内部备注)" prop="card_type">
        <el-input v-model="dialogForm.card_type" />
      </el-form-item>
      <el-form-item label="卡品牌(内部备注)" prop="card_type">
        <el-input v-model="dialogForm.brand" placeholder="VISA,MasterCard等" />
      </el-form-item>
      <el-form-item label="发卡渠道" prop="issuer_channel">
        <el-select
          clearable
          v-model="dialogForm.issuer_channel"
          placeholder="发卡渠道"
          style="width: 100%"
        >
          <el-option
            v-for="item in issueChannelData"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="渠道API对接商户" prop="issuer_client">
        <el-select
          clearable
          v-model="dialogForm.issuer_client"
          placeholder="渠道API对接商户"
          style="width: 100%"
        >
          <el-option
            v-for="item1 in issueClientData"
            :key="item1.value"
            :label="item1.name"
            :value="item1.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="发行类型"
        :label-width="formLabelWidth"
        prop="issuer_type"
      >
        <el-select
          v-model="dialogForm.issuer_type"
          placeholder="发行类型"
          style="width: 100%"
        >
          <!-- <el-option label="云汇航旅VCC卡" value="航旅VCC卡" /> -->
          <el-option label="Halo商务VCC卡" value="商务VCC卡" />
        </el-select>
      </el-form-item>
      <el-form-item
        label="关联账户资产"
        :label-width="formLabelWidth"
        prop="asset_type"
      >
        <el-select
          v-model="dialogForm.asset_type"
          placeholder="关联账户资产"
          style="width: 100%"
        >
          <!-- <el-option label="法币资产" value="balance" /> -->
          <el-option label="钱包资产" value="crypto" />
        </el-select>
      </el-form-item>
        <el-form-item
        label="Halo卡产品"
        :label-width="formLabelWidth"
        prop="product_id"
      >
        <el-select
          v-model="dialogForm.product_id"
          placeholder="Halo卡产品"
          style="width: 100%"
          filterable
        >
          <el-option
            v-for="item in cardsProductList"
            :key="item.id"
            :label="
              item.issuer_channel +
              ': ' + item.id + '.卡BIN (' +
              item.card_bin +
              ') ' + '-' + 
              item.currency +
              '-' +
              item.card_network
            "
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="是否通过线下开卡"
        :label-width="formLabelWidth"
        prop="is_offline"
      >
        <el-select
          v-model="dialogForm.is_offline"
          placeholder="是否通过线下开卡"
          style="width: 100%"
        >
          <el-option label="否" :value="0" />
          <!-- <el-option label="是" :value="1" /> -->
        </el-select>
      </el-form-item>
      <el-form-item
        label="卡说明"
        :label-width="formLabelWidth"
        prop="description"
      >
        <el-input
          v-model="dialogForm.description"
          type="textarea"
          :rows="5"
        ></el-input>
      </el-form-item>
      <el-form-item label="是否可用" prop="is_active">
        <el-select
          v-model="dialogForm.is_active"
          placeholder="是否可用"
          style="width: 100%"
        >
          <el-option label="是" :value="1" />
          <el-option label="否" :value="0" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button
          type="primary"
          @click="submit(dialogForm)"
          :loading="btnLoading"
        >
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, computed } from "vue";
const dialogFormRef = ref(null);
import { GlobalStore } from "@/store";

const globalStore = GlobalStore();
const payMerchantList = computed(() => globalStore.payMerchantList);

import { HaloCardsProductApi } from "@/api/payServerse/cards";

defineProps({
  dialogFormVisible: {
    type: Boolean,
    default: false,
  },
  dialogForm: {
    type: Object,
    default: {
      id: "",
      merchant_id: "",
      name: "",
      en_name: "",
      region: "",
      business: "",
      card_type: "",
      brand: "",
      issuer_client: "",
      issuer_channel: "",
      is_offline: 0,
      issuer_type: "",
      asset_type: "",
      product_id: "",
      description: "",
      is_actie: 1,
    },
  },
  btnLoading: {
    type: Boolean,
    default: false,
  },
  issueChannelData: { type: Object, default: [] },
  issueClientData: { type: Object, default: [] },
  cardConfigData: { type: Object, default: [] },
});
const emits = defineEmits([
  "closeDialog",
  "cancel",
  "submitForm",
  "cardTypeChange",
]);

const formLabelWidth = "200px";
// 校验
const rules = {
  merchant_id: [{ required: true, message: "请输入商户id", trigger: "blur" }],
  name: [{ required: true, message: "请输入中文名称", trigger: "blur" }],
  en_name: [{ required: true, message: "请输入英文名称", trigger: "blur" }],
  issuer_channel: [
    { required: true, message: "请输入开卡渠道", trigger: "blur" },
  ],
  issuer_client: [
    { required: true, message: "请选择渠道API对接商户", trigger: "blur" },
  ],
  product_id: [
    { required: true, message: "请选择Halo卡产品", trigger: "blur" },
  ],
  issuer_type: [{ required: true, message: "请选择发行类型", trigger: "blur" }],
  asset_type: [
    { required: true, message: "请选择开卡扣除资产类型", trigger: "blur" },
  ],
};

const cardType = ref("");

const cardTypeChange = (val) => {
  emits("cardTypeChange", val);
};

const cancel = () => {
  cardType.value = "";
  emits("cancel");
};

// 提交
const submit = (dialogForm) => {
  dialogFormRef.value
    .validate()
    .then(async () => {
      try {
        const param = Object.assign({}, dialogForm);
        cardType.value = "";
        if (!param.product_id) {
          param.product_id = 0;
        }
        emits("submitForm", param);
      } catch (error) {
        return false;
      }
    })
    .catch((error) => {
      return false;
    });
};

const cardsProductList = ref([]);

const getCardsProduct = async () => {
  const { data } = await HaloCardsProductApi({ page: 1, pagesize: 9999, is_active: 1 });
  cardsProductList.value = data.results || [];
};

getCardsProduct();
</script>
